<template >
  <a-tabs v-model:activeKey="activeKey" style="margin-left: 20px; width: 800px">
    <a-tab-pane key="1" tab="审批进度" >
      <a-spin :spinning="confirmLoading" style="height: 200px">
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <!-- 添加单选框 -->
          审核
          <a-form-item label="是否通过" name="pass" >
            <!-- 显示星号 -->
            <!--        <span class="required-star">*</span>-->
            <a-radio-group v-model:value="formData.pass">
              <a-radio value="Y">通过</a-radio>
              <a-radio value="N">不通过</a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 添加备注 -->
          <a-form-item label="备注" name="remark" >
            <!-- 显示星号 -->
            <!--        <span class="required-star">*</span>-->
            <a-textarea v-model:value="formData.remark"/>
          </a-form-item>
          <a-button type="primary" style="margin-left: 300px" @click="submitForm">提交审核</a-button>
        </a-form>
        <a-table ref="table" :columns="columns" :data-source="data" size="large" bordered :pagination="true" style="margin-left: 40px">
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
          <template #title>审核记录</template>
        </a-table>

      </a-spin>
    </a-tab-pane>
    <a-tab-pane key="2" tab="汇总报表数据" force-render>
      <MonthlySummaryQianTao ref="qianTaoZuJian" :editValue="editValue" />
<!--      <MonthlySummaryQianTao />-->
    </a-tab-pane>
  </a-tabs>
<!--  <template #footer>-->
<!--    <div>-->
<!--      <a-button @click="handleCancel">关闭</a-button></div>-->
<!--  </template>-->
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { getValueType } from '/@/utils';
  import { saveOrUpdate,save,wuyeshenheUrl } from '../MonthlySummary.api';
  import { Form } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import MonthlySummaryQianTao from './MonthlySummaryQianTao.vue';

  const editValue = ref();

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 80,
      align: 'center',
    },
    {
      title: '业务',
      dataIndex: 'businessKey_dictText',
      align: 'center',
    },
    {
      title: '任务名称',
      dataIndex: 'taskName',
      align: 'center',
    },
    {
      title: '审批结果',
      dataIndex: 'approveResult_dictText',
      align: 'center',
      width: 100,
    },
    {
      title: '审批人',
      dataIndex: 'approver_dictText',
      width: 80,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
    },
  ];

  let data = ref([]);

  const activeKey = ref('1');
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: () => {} },
    formBpm: { type: Boolean, default: true },
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    reportName: '',
    communityId: '',
    month: '',
    startData: '',
    endData: '',
    pusher: '',
    pushData: '',
    promoter: '',
    promoteTime: '',
    progress: '',
    userId: '',
    pass: '',
    remark: '',
    actProcessId: '',
  });
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = {};
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

  // 表单禁用
  const disabled = computed(() => {
    if (props.formBpm === true) {
      if (props.formData.disabled === false) {
        return false;
      } else {
        return true;
      }
    }
    return props.formDisabled;
  });

  /**
   * 新增
   */
  function add() {
    edit({});
  }

  /**
   * 编辑
   */

  const qianTaoZuJian = ref();
  function edit(record) {
    //子组件传值
    qianTaoZuJian.value.chuanZhi(record);

    editValue.value = record;
    console.log('edit的record的值为', record);
    index2.value.businesKey = record.id;
    defHttp
      .get({
        url: `/shenhe/hywyReportProcessApproveRecord/list?businessKey=${record.id}`, // 使用导入的 Api.list 作为接口的 URL，并将 idParam 作为路径参数传递
      })
      .then((response) => {
        // 请求成功处理逻辑
        console.log('11111111接口调用成功：', response);
        response.records.forEach((item, index) => {
          item.index = index + 1;
        });
        data.value = response.records;
        console.log(' data ', data);
      })
      .catch((error) => {
        // 请求失败处理逻辑
        console.error('222222222接口调用失败：', error);
      });
    nextTick(() => {
      resetFields();
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if (record.hasOwnProperty(key)) {
          tmpData[key] = record[key];
        }
      });
      //赋值
      Object.assign(formData, tmpData);
      console.log('edit的formData的值为', formData);
    });
  }
  /**
   * 提交数据
   */
  const index2 = ref({});
  async function submitForm() {
    const userStore = useUserStore();
    const id = userStore.getUserInfo;
    console.log('id', id);
    // 触发表单验证
    await validate();
    console.log('formData的值为', formData);
    confirmLoading.value = true;
    const isUpdate = ref<boolean>(false);
    //时间格式化
    let model = formData;
    if (model.id) {
      isUpdate.value = true;
    }
    //循环数据
    for (let data in model) {
      //如果该数据是数组并且是字符串类型
      if (model[data] instanceof Array) {
        let valueType = getValueType(formRef.value.getProps, data);
        //如果是字符串类型的需要变成以逗号分割的字符串
        if (valueType === 'string') {
          model[data] = model[data].join(',');
        }
      }
    }
    console.log('model123', model);
    // model.business_key = model.id;
    // model.id = null;

    index2.value.businessKey = model.id;
    index2.value.approveResult = model.pass;
    index2.value.approver = id.id;
    console.log('index2', index2.value);
    await wuyeshenheUrl(model)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }

  defineExpose({
    add,
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    height: 220px !important;
    overflow-y: auto;
    padding: 14px;
  }
</style>
